<section [formGroup]="geoActionConfigForm" class="tb-form-panel no-border no-padding">
  <section class="tb-form-panel stroked">
    <div class="tb-form-panel-title" translate>tb.rulenode.coordinate-field-names</div>
    <section>
      <div fxLayout="row" fxLayoutGap="16px">
        <mat-form-field fxFlex="50" class="mat-block">
          <mat-label>{{ 'tb.rulenode.latitude-field-name' | translate }}</mat-label>
          <input matInput formControlName="latitudeKeyName" required>
          <mat-error *ngIf="geoActionConfigForm.get('latitudeKeyName').hasError('required')">
            {{ 'tb.rulenode.latitude-field-name-required' | translate }}
          </mat-error>
        </mat-form-field>
        <mat-form-field fxFlex="50" class="mat-block">
          <mat-label>{{ 'tb.rulenode.longitude-field-name' | translate }}</mat-label>
          <input matInput formControlName="longitudeKeyName" required>
          <mat-error *ngIf="geoActionConfigForm.get('longitudeKeyName').hasError('required')">
            {{ 'tb.rulenode.longitude-field-name-required' | translate }}
          </mat-error>
        </mat-form-field>
      </div>
      <div class="tb-form-hint tb-primary-fill" translate>tb.rulenode.coordinate-field-hint</div>
    </section>
  </section>
  <section class="tb-form-panel stroked" [class.no-padding-bottom]="!defaultPaddingEnable">
    <div class="tb-form-panel-title" translate>tb.rulenode.geofence-configuration</div>
    <section fxLayout="column">
      <mat-form-field fxFlex class="mat-block" hideRequiredMarker>
        <mat-label>{{ 'tb.rulenode.perimeter-type' | translate }}</mat-label>
        <mat-select formControlName="perimeterType">
          <mat-option *ngFor="let type of perimeterTypes" [value]="type">
            {{ perimeterTypeTranslationMap.get(type) | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <div tb-hint-tooltip-icon="{{ geoActionConfigForm.get('perimeterType').value === perimeterType.CIRCLE
        ? ('tb.rulenode.fetch-circle-parameter-info-from-metadata-hint'
            | translate : { perimeterKeyName: geoActionConfigForm.get('perimeterKeyName').valid
                              ? geoActionConfigForm.get('perimeterKeyName').value
                              : 'ss_perimeter'})
        : ('tb.rulenode.fetch-poligon-parameter-info-from-metadata-hint'
            | translate : { perimeterKeyName: geoActionConfigForm.get('perimeterKeyName').valid
                              ? geoActionConfigForm.get('perimeterKeyName').value
                              : 'ss_perimeter'}) }}"
           class="tb-form-row no-border no-padding slide-toggle">
        <mat-slide-toggle class="mat-slide" formControlName="fetchPerimeterInfoFromMessageMetadata">
          {{ 'tb.rulenode.fetch-perimeter-info-from-metadata' | translate }}
        </mat-slide-toggle>
      </div>
      <mat-form-field *ngIf="geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value" class="mat-block">
        <mat-label>{{ 'tb.rulenode.perimeter-key-name' | translate }}</mat-label>
        <input matInput formControlName="perimeterKeyName" required>
        <mat-error *ngIf="geoActionConfigForm.get('perimeterKeyName').hasError('required')">
          {{ 'tb.rulenode.perimeter-key-name-required' | translate }}
        </mat-error>
        <mat-hint>{{ 'tb.rulenode.perimeter-key-name-hint' | translate }}</mat-hint>
      </mat-form-field>
      <div fxLayout="column"
           *ngIf="geoActionConfigForm.get('perimeterType').value === perimeterType.CIRCLE &&
              !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
        <div fxLayout="row" fxLayoutGap="16px">
          <mat-form-field fxFlex>
            <mat-label>{{ 'tb.rulenode.circle-center-latitude' | translate }}</mat-label>
            <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>
            <mat-error *ngIf="geoActionConfigForm.get('centerLatitude').hasError('required')">
              {{ 'tb.rulenode.circle-center-latitude-required' | translate }}
            </mat-error>
          </mat-form-field>
          <mat-form-field fxFlex>
            <mat-label>{{ 'tb.rulenode.circle-center-longitude' | translate }}</mat-label>
            <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>
            <mat-error *ngIf="geoActionConfigForm.get('centerLongitude').hasError('required')">
              {{ 'tb.rulenode.circle-center-longitude-required' | translate }}
            </mat-error>
          </mat-form-field>
        </div>
        <div fxLayout="row" fxLayoutGap="16px">
          <mat-form-field fxFlex>
            <mat-label>{{ 'tb.rulenode.range' | translate }}</mat-label>
            <input type="number" min="0" step="0.1" matInput formControlName="range" required>
            <mat-error *ngIf="geoActionConfigForm.get('range').hasError('required')">
              {{ 'tb.rulenode.range-required' | translate }}
            </mat-error>
          </mat-form-field>
          <mat-form-field fxFlex>
            <mat-label>{{ 'tb.rulenode.range-units' | translate }}</mat-label>
            <mat-select formControlName="rangeUnit" required>
              <mat-option *ngFor="let type of rangeUnits" [value]="type">
                {{ rangeUnitTranslationMap.get(type) | translate }}
              </mat-option>
            </mat-select>
            <mat-error *ngIf="geoActionConfigForm.get('rangeUnit').hasError('required')">
              {{ 'tb.rulenode.range-units-required' | translate }}
            </mat-error>
          </mat-form-field>
        </div>
      </div>
      <div fxLayout="column" *ngIf="geoActionConfigForm.get('perimeterType').value === perimeterType.POLYGON &&
                                 !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
        <mat-form-field class="mat-block" subscriptSizing="dynamic">
          <mat-label translate>tb.rulenode.polygon-definition</mat-label>
          <input matInput formControlName="polygonsDefinition" required>
          <mat-icon matSuffix class="margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                    color="primary"
                    matTooltip="{{ 'tb.rulenode.polygon-definition-hint' | translate }}">
            help
          </mat-icon>
          <mat-error *ngIf="geoActionConfigForm.get('polygonsDefinition').hasError('required')">
            {{ 'tb.rulenode.polygon-definition-required' | translate }}
          </mat-error>
        </mat-form-field>
      </div>
    </section>
  </section>
  <section class="tb-form-panel stroked no-padding-bottom">
    <div fxLayout="column" fxLayout.gt-sm="row"  fxLayoutGap.lt-md="16px" fxLayoutAlign="space-between">
      <div class="tb-form-panel-title">{{ 'tb.rulenode.presence-monitoring-strategy' | translate }}</div>
      <tb-toggle-select class="fetch-to-data-toggle" formControlName="reportPresenceStatusOnEachMessage" appearance="fill" >
        <tb-toggle-option *ngFor="let strategy of presenceMonitoringStrategyKeys" [value]="presenceMonitoringStrategies.get(strategy).value">
          {{ presenceMonitoringStrategies.get(strategy).name | translate }}
        </tb-toggle-option>
      </tb-toggle-select>
    </div>
    <div class="tb-form-hint tb-primary-fill"> {{ geoActionConfigForm.get('reportPresenceStatusOnEachMessage').value === false ?
        ('tb.rulenode.presence-monitoring-strategy-on-first-message-hint' | translate) :
        ('tb.rulenode.presence-monitoring-strategy-on-each-message-hint' | translate) }}
    </div>
    <section fxLayout="column">
      <div *ngIf="geoActionConfigForm.get('reportPresenceStatusOnEachMessage').value === false">
        <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>tb.rulenode.min-inside-duration</mat-label>
            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>
            <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('required')">
              {{ 'tb.rulenode.min-inside-duration-value-required' | translate }}
            </mat-error>
            <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('min')">
              {{ 'tb.rulenode.time-value-range' | translate }}
            </mat-error>
            <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('max')">
              {{ 'tb.rulenode.time-value-range' | translate }}
            </mat-error>
          </mat-form-field>
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>tb.rulenode.min-inside-duration-time-unit</mat-label>
            <mat-select formControlName="minInsideDurationTimeUnit" required>
              <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
                {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>tb.rulenode.min-outside-duration</mat-label>
            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>
            <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('required')">
              {{ 'tb.rulenode.min-outside-duration-value-required' | translate }}
            </mat-error>
            <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('min')">
              {{ 'tb.rulenode.time-value-range' | translate }}
            </mat-error>
            <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('max')">
              {{ 'tb.rulenode.time-value-range' | translate }}
            </mat-error>
          </mat-form-field>
          <mat-form-field fxFlex class="mat-block">
            <mat-label translate>tb.rulenode.min-outside-duration-time-unit</mat-label>
            <mat-select formControlName="minOutsideDurationTimeUnit" required>
              <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
                {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </section>
  </section>
</section>
